<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>显示有哪些学生迟到</title>
		<!--导入vue这个包-->
		<script type="text/javascript" src="js/vue.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
		
		<style>
			table{
				
				margin: 10px auto;
				width: 800px;
				border-collapse: collapse;
			}
			
			table td{
				border: 1px solid lightblue;
				width: 80px;
				height: 30px;
			}
		
		</style>
	</head>
	<body>
		<table id="studentList">
			
			<!--表头是固定的-->
			<tr>
				<td><input id="quan" type="checkbox" v-on:click="selectAll($event)" /></td>
				<td>班级名称</td>
				<td>学生姓名</td>
				<td>考勤日期</td>
				<td>考勤类型</td>
				<td>手机号码</td>
			</tr>
			
			
			<tr v-for="student in studentList">
				<td><input type="checkbox" class="checkItem" v-bind:id="student.id" :value="student.id" v-model="checkData" /></td>
				<td>{{student.className}}</td>
				<td>{{student.studentName}}</td>
				<td>{{student.delayDate}}</td>
				<td>{{student.typeName}}</td>
				<td>{{student.phone}}</td>
			</tr>
			
			<tr>
				<td colspan="6"><input type="button" v-on:click="deteleData" value="删除" /></td>
			</tr>
			
		</table>
	</body>
	
	<script>
	
		// 1 在页面把静态的页面写出来  OK
		
		// 2 向后端发送请求 拿到返回json格式的数据
		
		window.onload=function(){
			
			//页面加载完毕就干活  往后端发请求
			
			var vue= new Vue({
				el:'#studentList',
				data:{
					studentList:{},
					checkData:[],
				},
				
				watch: {
					checkData: { 
						// 监视双向绑定的数组变化
						handler(){
							if(this.checkData.length == this.studentList.length){
								document.querySelector('#quan').checked = true;
							}else {
								document.querySelector('#quan').checked = false;
							}
						},
						deep: true
					}
				},
						
				methods:{
					//发ajax请求都方法 ....
					
					get:function(){
					
						var url='http://localhost:8080/attendance-service/class/find.do?method=delay';
						this.$http.get(url).then(function(backdatas){
							//1 给vue对象的data属性赋值
							console.log(backdatas);
							
							var code =backdatas.body.code;
							console.log(code);
							
							// 拿到后台返回的数据
							var dataR=backdatas.body.data;
							
							// 把 dataR 给 data的studentList属性
							vue.studentList=dataR;
							console.log("success...")
							
						});
					},
					
					post:function(){
						
						// 1 用vue拿到ids =[32,36,37] 
						var ids=vue.checkData;
						
						var url='http://localhost:8080/attendance-service/class/find.do?method=delete';
						
						//var fdata={"ids":ids};
						this.$http.post(url,{ids:ids},{emulateJSON:false}).then(function(backdatas){
							
							console.log(backdatas);
							
						});
						
					},
					
					// 给按钮绑定1个事件
					deteleData:function(){
						
						//调用post方法 删除数据?
						vue.post();
						
						//刷新页面
						location.reload();
						
					},
					selectAll:function(e){ // 点击全选事件函数
						var checkObj = document.querySelectorAll('.checkItem'); // 获取所有checkbox项
						if(e.target.checked){ // 判定全选checkbox的勾选状态
							for(var i=0;i<checkObj.length;i++){
								if(!checkObj[i].checked){
									// 将未勾选的checkbox选项push到绑定数组中
									
									var abc=parseInt(checkObj[i].value);
									this.checkData.push(abc);
								}
							}
						}else { // 如果是去掉全选则清空checkbox选项绑定数组
							this.checkData = [];
						}
					},
				}
			});
			
			// 调用这个方法
			 vue.get();
			
		}
		
		// 如何给1个元素绑定1个事件
		
		
		// 3 把这些数据和页面绑定
	
	</script>
</html>
